<script setup>
import { defineProps, defineEmits, ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
const props = defineProps({
  isloading: {
    type: Boolean,
    default: false
  },
  isFinished: {
    type: Boolean,
    default: false
  }

})
const emit = defineEmits(['load'])
const target = ref(null)
useIntersectionObserver(
  target,
  ([{ isIntersecting }], observerElement) => {
    if (isIntersecting && props.isloading === false && props.isFinished === false) {
      emit('load')
    }
  },
  {
    threshold: 0
  }
)

</script>
<template>
    <div class="xtx-infinite-loading" ref="target">
        <!-- 正在加载数据 -->
        <div class="loading" v-if="isloading">
            <span class="img"></span>
            <span class="text">正在加载</span>
        </div>
        <!-- 数据加载完成 -->
        <div class="none" v-if="isFinished">
            <span class="text">亲，没有更多了</span>
        </div>
    </div>
</template>

<style scoped lang="less">
.xtx-infinite-loading{
    .loading{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;
        .img{
            width: 50px;
            height: 50px;
            background:url('../assets/images/load.gif') no-repeat center/contain;
        }
        .text{
            color: #999;
            font-size: 16px;
        }
    }
    .none{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;
        .text{
            color: #999;
            font-size: 16px;
        }
    }
}
</style>
